<template>
  <view class="">
    <cu-layout ref="layoutRef" show-switch navbar="custom" tabbar="/pages/index/index">
      <view class="">
        <view class="head">
          <view class="head-bg">
            <image class="head-bg-img" :src="bgImg" />
          </view>
          <view class="head-mian">
            <view
              class=""
              :style="{
                height: $u.addUnit($u.sys().statusBarHeight + $u.getPx(navbarStyle.height) + 50,'px'),
              }"
            />
            <view class="head-fixed" :class="!state.isStickyTop ? 'bg-white shadow-b' : ''">
              <u-status-bar bg-color="transparent" />
              <view
                class="relative flex-c pl-12"
                :style="{height: navbarStyle.height + 'px', paddingRight: $.utils.isH5() ? '12px' : `${navbarStyle.menuButtonWidth + navbarStyle.menuButtonLeft * 2}px`}"
              >
                <u-search
                  v-bind="{
                    placeholderColor: state.isStickyTop ? '#fff' : undefined,
                    searchIconColor: state.isStickyTop ? '#fff' : undefined,
                    bgColor: state.isStickyTop ? 'rgba(0,0,0,.2)' : undefined,
                    height: navbarStyle.menuButtonHeight,
                    placeholder: '搜索商品',
                    showAction: false,
                    disabled: true
                  }"
                />
                <view class="absolute-full" @click="$.router.go('/pages/goods/list')" />
              </view>
              <cu-layout-shop :color="state.isStickyTop ? '#fff' : ''" />
            </view>
            <view class="p-10" style="padding-top: 10rpx;">
              <u-swiper
                v-if="state.banner.length"
                :list="state.banner"
                radius="5"
                key-name="cover"
                bg-color="#ffffff"
                @change="({current}) => state.bannerActive = current"
              />
            </view>
          </view>
        </view>
        <cu-goods-list :list="state.product" />
      </view>
    </cu-layout>
  </view>
</template>

<script setup>
import {
  computed,
  watch,
  reactive
} from 'vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import $ from '@/sheep'

const state = reactive({
  banner: [],
  bannerActive: 0,
  product: [],
  isStickyTop: true
})
const bgImg = computed(() => state.banner[state.bannerActive]?.cover)
const navbarStyle = computed(() => $.platform.navbarStyle)
const useShop = $.store('shop')
onLoad(() => {
})
watch(() => useShop.shopId, newVal => {
  if (newVal) {
    reload()
  }
}, { immediate: true })
onPageScroll(({ scrollTop }) => {
  state.isStickyTop = scrollTop > 0 ? false : true
})

function reload() {
  $.get('/Index/index', {}, { isShop: 1 }).then(res => {
    state.banner = res.data.banner
    state.product = res.data.product
  })
}
</script>
<style lang="scss">
.head {
	position: relative;
}
.head-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 0;
	-webkit-filter: blur(0);
	filter: blur(0);
	overflow: hidden;
}
.head-bg-img {
	display: block;
	width: 100%;
	height: 100%;
	filter: blur(15px);
	transform: scale(1.5);
}
.head-mian {
	position: relative;
	z-index: 1;
}
.head-fixed {
	position: fixed;
	width: 100%;
	top: 0;
	background-color: transparent;
	transition: background-color 0.5s ease;
	z-index: 2;
	&.bg-white {
		background-color: #fff;
	}
}

</style>
